<template>
    <div v-if="$route.name === 'Help'" class="help-home-page">
        <div class="header">
            <headers headerShow></headers>
        </div>
        <div class="main">
            <div class="page-router">
                <el-breadcrumb class="router flex items-center" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item class="item" :to="`${ loginStatus ? '/' : 'login' }`">
                        {{ loginStatus ? '首页' : '登录' }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item class="item">帮助中心</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="help-introduce flex justify-between">
                <div class="introduce-content">
                    <div class="text-title font-bold">帮助中心</div>
                    <div class="content" v-html="helpCenter"></div>
                </div>
                <img src="@/assets/images/help/home-one.jpg" alt="">
            </div>

            <div class="problem-common">
                <div class="text-title font-bold text-center">常见问题</div>
                <div class="content mx-auto flex flex-wrap text-center">
                    <div
                        v-for="item in oftenQuestion"
                        :key="item.id"
                        class="w-1/3"
                        @click="toContainer(
                            'Help.Question',
                            item.id,
                            item.category_id,
                            item.category_name,
                            item.name)">
                        <el-button type="text">{{ item.name }}</el-button>
                    </div>
                </div>
            </div>

            <div class="problem-type">
                <div class="in-box">
                    <div class="text-title font-bold text-center">问题分类</div>
                    <div class="content mx-auto flex flex-wrap">
                        <div
                            v-for="item in categoryList.slice(0, 6)"
                            :key="item.id"
                            @click="toContainer('Help.Question.List', '', item.id, item.name)"
                            class="item flex items-center rounded cursor-pointer">
                            <img :src="item.icon">
                            <div class="item-content">
                                <div class="text-base">{{ item.name }}</div>
                                <div class="text-xs mt-2 text-gray-500">{{ item.description }}</div>
                            </div>
                        </div>
                    </div>
                    <div
                        v-if="categoryList.length > 6"
                        class="more"
                        @click="toContainer('Help.Question.List', '', '', '')">
                        <span>查看更多</span>
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
            </div>

            <div class="help-product">
                <div class="text-title font-bold text-center">产品日志</div>
                <div class="text-title2 text-center">看看我们最近更新了什么好东西</div>
                <div class="w-4/5 help-product-content">
                    <div v-for="item in logList" :key="item.id" class="item">
                        <div class="w-full flex justify-between items-center">
                            <div class="left w-full">
                                <div class="flex items-center">
                                    <img :src="item.icon || '@/assets/images/xxdt-logo.png'" alt="">
                                    <div>
                                        <div class="text-xl font-bold left-in">
                                            <div class="left-in-title">{{ item.name }}</div>
                                            <div class="right">
                                                <div class="right-title">{{ item.introduction }}</div>
                                                <div
                                                    class="text-sm btn-txt cursor-pointer"
                                                    @click="toContainer('Help.Log', item.id)">
                                                    阅读详细 <i class="el-icon-arrow-right"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-date">{{ item.date }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-mob">
                            <div class="right-title ellipsis-2">{{ item.introduction }}</div>
                            <div
                                class="text-sm btn-txt cursor-pointer"
                                @click="toContainer('Help.Log', item.id)">
                                阅读详细 <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                        <div class="icon-border"></div>
                    </div>
                </div>
                <div class="text-center w-full">
                    <el-button
                        @click="toContainer('Help.Logmore')"
                        type="text"
                        class="more">更多</el-button>
                </div>
            </div>

            <div class="app-box">
                <div class="content-box">
                    <div class="text-title font-bold text-center">角色地图用户学习端下载</div>
                    <div class="desc text-center">围绕200+典型研发工作场景的必备能力项，学习解决问题的好经验好方法</div>
                    <div class="mt-16 flex items-center justify-center">
                        <a
                            href="https://apps.apple.com/cn/app/%E8%A7%92%E8%89%B2%E5%9C%B0%E5%9B%BE-%E6%8F%90%E5%8D%87%E5%9B%A2%E9%98%9F%E6%A0%B8%E5%BF%83%E8%83%BD%E5%8A%9B%E9%A1%B9/id1509656761"
                            class="ios flex items-center justify-center">
                            <img src="@/assets/images/help/ios.png" alt="">
                            <span>iOS端下载</span>
                        </a>
                        <a
                            href="https://qiniu-lm.msup.com.cn/%E8%A7%92%E8%89%B2%E5%9C%B0%E5%9B%BE_6.2.apk"
                            class="android flex items-center justify-center">
                            <img src="@/assets/images/help/android.png" alt="">
                            <span>Android端下载</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="help-contact text-center">
                <div class="text-title font-bold">联系我们</div>
                <div class="content">没有找到想要的答案？发送反馈给我们获取帮助吧。</div>
                <div class="item-box w-3/4 mx-auto flex justify-center text-center">
                    <div class="item w-1/3 flex flex-col justify-between mr-16">
                        <div>
                            <div class="title">电话支持</div>
                            <div class="desc">
                                直接拨打客服电话以获得帮助<br>
                                （客服在线时间：周一至周五 09:00-17:00）
                            </div>
                        </div>
                        <div class="text-desc text">400-8128-020</div>
                    </div>
                    <div class="item w-1/3 flex flex-col justify-between">
                        <div>
                            <div class="title">邮件支持</div>
                            <div class="desc">
                                发送邮件至以下邮箱，我们会尽快回复
                            </div>
                        </div>
                        <div class="text-desc text">market@msup.com.cn</div>
                    </div>
                </div>
            </div>
            <footers></footers>
        </div>
    </div>
    <div v-else class="router-view">
        <router-view></router-view>
    </div>
</template>

<script>
import {
    Breadcrumb,
    BreadcrumbItem,
} from 'element-ui';
import footers from '@/components/layout/Footer';
import headers from '@/components/layout/Header';

export default {
    components: {
        footers,
        headers,
        ElBreadcrumb: Breadcrumb,
        ElBreadcrumbItem: BreadcrumbItem,
    },
    computed: {
        loginStatus() {
            return this.$store.state.my && this.$store.state.my.account;
        },
    },
    data() {
        return {
            loading: false,
            helpCenter: '',
            oftenQuestion: [],
            categoryList: [],
            logList: [],
        };
    },
    methods: {
        fetchData() {
            const center = API.get('../help_center');
            const common = API.get('../problem/common');
            const category = API.get('../problem_category');
            const log = API.get('../product_log');

            this.loading = true;
            axios.all([center, common, category, log]).then(axios.spread((...respones) => {
                const list = respones[3] || [];
                if (list.length > 5) {
                    list.splice(5, list.length - 5);
                }

                this.helpCenter = respones[0];
                this.oftenQuestion = respones[1];
                this.categoryList = respones[2];
                this.logList = list;
            })).finally(() => this.loading = false);
        },

        // 加载模块的名称，详情id，typeId: 问题类别id，type: 问题类别名称， types： 问题名称
        toContainer(name, id, typeId) {
            this.$router.push({
                name: name,
                query: {
                    id,
                    typeId,
                },
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.help-home-page {
    $text-color: #2d70ae;
    padding-top: 60px;

    @media (max-width: 960px) {
        padding-top: 44px;
    }

    .text-title {
        font-size: 30px;
        line-height: 42px;

        @media (max-width: 960px) {
            font-size: 20px;
            line-height: 28px;
            text-align: center;
        }
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: 1px 1px 10px 3px rgba($color: #000000, $alpha: .1);
    }

    .main {
        padding: 0;
        overflow: visible;
        position: relative;
    }

    .page-router {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1024px;
        margin: 20px auto 0 auto;

        @media (max-width: 960px) {
            display: none;
        }
    }

    .help-introduce,
    .problem-common,
    .problem-type .in-box,
    .help-product,
    .app-box .content-box {
        max-width: 1024px;
        margin: auto;
    }

    .help-introduce {
        padding: 60px 0 0 0;

        @media (max-width: 960px) {
            padding: 0;
        }

        .introduce-content {
            width: 534px;
            margin-top: 67px;
            padding-right: 20px;
            box-sizing: border-box;

            @media (max-width: 960px) {
                width: 100%;
                margin-top: 24px;
                padding: 0;
            }
        }

        .content {
            line-height: 22px;
            color: #4A4A4A;
            margin-top: 23px;

            @media (max-width: 960px) {
                font-size: 14px;
                line-height: 20px;
                margin-top: 15px;
                padding: 0 20px;
            }
        }

        img {
            width: 275px;
            height: 245px;
            object-fit: cover;

            @media (max-width: 960px) {
                display: none;
            }
        }
    }

    .problem-common {
        padding: 100px 0 75px 0;

        @media (max-width: 960px) {
            padding: 47px 0 16px;

            .content {
                width: 100%;
                padding: 0 20px;
                text-align: left;
                justify-content: space-between;

                .w-1\/3 {
                    width: 45%;
                }
            }
        }

        .text-title {
            color: #252525;
            margin-bottom: 52px;

            @media (max-width: 960px) {
                margin-bottom: 23px;
            }
        }

        .el-button {
            font-size: 16px;
            color: $text-color;
            width: 280px;
            padding: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 16px;
            font-weight: 400;

            @media (max-width: 960px) {
                font-size: 14px;
                width: 100%;
                margin-bottom: 18px;
                text-align: left;
            }
        }
    }

    .problem-type {
        padding: 67px 0 70px 0;
        background: $text-color;
        width: 100%;

        @media (max-width: 960px) {
            padding: 26px 0 20px;

        }

        .more {
            cursor: pointer;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            color: white;
            margin-top: 20px;

            @media (max-width: 960px) {
                margin-top: 10px;
            }

            i {
                margin-top: 3px;
            }
        }

        .text-title {
            color: white;
        }

        .content {
            margin-top: 63px;
            @media (max-width: 960px) {
                margin-top: 23px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }

        .item {
            width: 334px;
            margin-bottom: 11px;
            padding: 25px 22px;
            box-sizing: border-box;
            background: white;

            img {
                width: 60px;
                height: 60px;
                object-fit: contain;
                margin-right: 20px;
            }
        }

        .item:nth-child(3n-1) {
            margin: 0 11px 11px 11px;
        }
    }

    .help-product {
        padding: 75px 0 55px 0;
        @media (max-width: 960px) {
            padding: 36px 16px 30px 20px;
        }

        &-content {
            margin-left: 170px;
            @media (max-width: 960px) {
                width: 100%;
                margin: 0;
            }
        }

        .text-title2 {
            font-size: 16px;
            margin: 13px 0 68px 0;
            color: #B4B4B4;
            @media (max-width: 960px) {
                font-size: 12px;
                margin: 10px 0 22px;
            }
        }

        .item {
            @media (max-width: 960px) {
                position: relative;

                &:last-child {
                    padding-bottom: 40px;
                }
            }

            .left {
                img {
                    width: 80px;
                    height: 80px;
                    object-fit: contain;
                    margin-right: 20px;
                    border: 2px solid rgb(45, 112, 174);
                    border-radius: 50%;
                    @media (max-width: 960px) {
                        width: 60px;
                        height: 60px;
                        border-width: 1px;
                        margin-right: 22px;
                    }
                }

                .text-date {
                    color: #B4B4B4;
                    margin-top: 7px;
                    font-size: 13px;
                    @media (max-width: 960px) {
                        font-size: 12px;
                        margin-top: 3px;
                    }
                }

                .left-in-title {
                    width: 230px;
                    word-break: break-all;
                    line-height: 28px;

                    @media (max-width: 960px) {
                        width: initial;
                    }
                }
            }

            .left-in {
                position: relative;
                @media (max-width: 960px) {
                    font-size: 16px;
                }
            }

            .right {
                position: absolute;
                left: 250px;
                top: 0;
                width: 478px;
                font-weight: 400;

                @media (max-width: 960px) {
                    display: none;
                }

                .right-title {
                    font-size: 16px;
                    color: #4A4A4A;
                    margin-bottom: 9px;
                    margin-top: 3px;
                    line-height: 22px;
                }
            }

            .right-mob {
                position: absolute;
                top: 60px;
                left: 82px;

                @media (min-width: 961px) {
                    display: none;
                }

                .right-title {
                    font-size: 14px;
                    color: #4A4A4A;
                    margin-bottom: 9px;
                    line-height: 20px;
                }
            }

            .icon-border {
                width: fit-content;
                height: 58px;
                border-right: 2px dashed rgb(45, 112, 174);
                margin-left: 40px;

                @media (max-width: 960px) {
                    height: 82px;
                    margin-left: 30px;
                }
            }

            .btn-txt {
                color: $text-color;
                font-size: 12px;
            }
        }

        .item:last-child {
            .icon-border {
                border: none;
                height: 0;
            }
        }

        .more {
            width: 128px;
            height: 40px;
            background: $text-color;
            border-color: $text-color;
            font-size: 16px;
            color: white;
            margin: 50px auto 0 auto;
        }
    }

    .app-box {
        position: relative;
        width: 100%;
        height: 350px;
        background: #4292cd;

        @media (max-width: 960px) {
            height: initial;
        }

        .bg {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .content-box {
            position: relative;
            color: white;
            padding-top: 70px;
            box-sizing: border-box;

            @media (max-width: 960px) {
                padding-top: 30px;
                padding-bottom: 53px;

                .mt-16 {
                    margin-top: 47px;
                    flex-direction: column;
                }
            }

            .desc {
                margin-top: 16px;

                @media (max-width: 960px) {
                    font-size: 12px;
                    line-height: 16px;
                    margin: 10px auto 0;
                    width: 220px;
                }
            }
        }

        .ios, .android {
            width: 321px;
            height: 70px;
            background: white;
            border-radius: 5px;
            cursor: pointer;

            @media (max-width: 960px) {
                width: 280px;
                height: 50px;
                box-shadow: 2px 2px 4px 0 rgba($color: #000000, $alpha: .3);
            }

            img {
                width: auto;
                height: 40px;
                margin-right: 25px;

                @media (max-width: 960px) {
                    height: 30px;
                    margin-right: 15px;
                }
            }

            span {
                color: $text-color;
                font-size: 22px;
                font-weight: 600;

                @media (max-width: 960px) {
                    font-size: 16px;
                    width: 120px;
                    text-align: center;
                }
            }
        }

        .ios:hover, .android:hover {
            box-shadow: 3px 3px 10px 5px rgba($color: #000000, $alpha: .3);
        }

        .ios:active, .android:active {
            box-shadow: 3px 5px 10px 2px rgba($color: #000000, $alpha: .3);
        }

        .ios {
            margin-right: 64px;
            @media (max-width: 960px) {
                margin-right: 0;
                margin-bottom: 23px;
            }
        }
    }

    .help-contact {
        padding-bottom: 94px;
        margin-top: 82px;

        @media (max-width: 960px) {
            margin: 0;
            padding: 21px 0 45px;
        }

        .content {
            color: #B4B4B4;
            margin-top: 10px;

            @media (max-width: 960px) {
                font-size: 12px;
                margin-top: 4px;
            }
        }

        .title {
            position: relative;
            font-size: 20px;
            font-weight: 600;
        }

        .title::before {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            margin-left: -20px;
            width: 40px;
            height: 4px;
            background: $text-color;
            border-radius: 4px;
        }

        .item-box {
            margin-top: 90px;

            @media (max-width: 960px) {
                width: initial;
                margin: 0;
                flex-direction: column;
                align-items: center;

                .item {
                    width: initial;
                    margin: 40px auto 0;

                    .title {
                        font-size: 16px;
                        line-height: 24px;
                    }

                    .title::before {
                        bottom: -5px;
                        height: 2px;
                    }
                }
            }
        }

        .desc {
            margin-top: 15px;
            font-size: 13px;
            color: rgb(74, 74, 74);
            line-height: 24px;

            @media (max-width: 960px) {
                font-size: 14px;
                margin-top: 17px;
            }
        }

        .text-desc {
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 25px auto 0 auto;

            @media (max-width: 960px) {
                height: initial;
                margin-top: 10px;
                line-height: 28px;
            }
        }

        .text {
            font-size: 24px;
            color: $text-color;

            @media (max-width: 960px) {
                font-size: 20px;
            }
        }

        .call {
            width: 170px;
            height: 40px;
            border-radius: 5px;
            background: $text-color;
            color: white;
        }
    }

    .ellipsis {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .router-view {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
    }
}
</style>
